<template>
  <div class="shop-manager">
    <account-card class="shop-manager" slot="btn" title="店铺管理">
      <el-button slot="btn" @click="changeshop" size="small" type="primary"
        >保存</el-button
      >
      <el-form :model="shopdata" label-width="80px">
        <el-form-item label="店铺名称">
          <el-input v-model="shopdata.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="店铺介绍">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="shopdata.bulletin"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺头像">
          <el-upload
            action="http://127.0.0.1:5000/shop/upload"
            :show-file-list="false"
            :on-success="avatarSuccess"
          >
            <img v-if="shopdata.avatar" :src="shopdata.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i
          ></el-upload>
        </el-form-item>
        <el-form-item label="店铺图片">
          <el-upload
            action="http://127.0.0.1:5000/shop/upload"
            list-type="picture-card"
            :file-list="fileList"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="picsSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="配送费">
          <el-input v-model="shopdata.deliveryPrice" size="small"></el-input>
        </el-form-item>
        <el-form-item label="配送时间">
          <el-input v-model="shopdata.deliveryTime" size="small"></el-input>
        </el-form-item>
        <el-form-item label="配送描述">
          <el-input v-model="shopdata.description" size="small"></el-input>
        </el-form-item>
        <el-form-item label="店铺评分">
          <el-input v-model="shopdata.score" size="small"></el-input>
        </el-form-item>
        <el-form-item label="销量">
          <el-input v-model="shopdata.sellCount" size="small"></el-input>
        </el-form-item>
        <el-form-item label="添加活动">
          <el-input v-model="active" size="small"></el-input>
          <el-button @click="shopdata.supports.push(active)"
            >添加活动</el-button
          >
        </el-form-item>
        <el-form-item label="活动">
          <el-checkbox-group v-model="type">
            <el-checkbox
              v-for="activename in shopdata.supports"
              :key="activename"
              :label="activename"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-picker
            is-range
            v-model="shopdata.date"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          ></el-time-picker>
        </el-form-item>
      </el-form>
    </account-card>
  </div>
</template>

<script>
import { shopinfo, shopedit } from "@/apis/shops.js";
import AccountCard from "@/components/accountcard/AccountCard.vue";
export default {
  components: {
    AccountCard,
  },
  data() {
    return {
      shopdata: {},
      type: [],
      fileList: [], //回填图片
      active: "",
      picsList: [], //新老图片数组
    };
  },
  methods: {
    //删除图片
    handleRemove(file) {
      console.log(file);
      let pname=file.response?file.response.imgUrl:file.name
      for(let i=0;i<this.picsList.length;i++){
        if(this.picsList[i]==pname){
          this.picsList.splice(i,1)
          break
        }
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 头像上传成功
    avatarSuccess(res, file) {
      this.newavatar = res.imgUrl;

      //回显本地图片
      this.shopdata.avatar = URL.createObjectURL(file.raw);
    },
    //照片墙上传成功
    picsSuccess(res, file) {
      console.log(res, file);
      this.picsList.push(res.imgUrl);
    },
    //保存
    changeshop() {
      let param = {
        id: this.shopdata.id,
        name: this.shopdata.name,
        bulletin: this.shopdata.bulletin,
        deliveryPrice: this.shopdata.deliveryPrice,
        deliveryTime: this.shopdata.deliveryTime,
        description: this.shopdata.description,
        score: this.shopdata.score,
        sellCount: this.shopdata.sellCount,

        avatar: this.newavatar, //店铺头像
        pics: JSON.stringify(this.picsList), //店铺照片墙
        supports: JSON.stringify(this.type), //店铺活动
        date: JSON.stringify(this.shopdata.date), //店铺时间
      };
      shopedit(param).then(res=>{
        // console.log(res.data);
        if(res.data.code===0){
           this.$message({
            message: "保存成功",
            type: "success",
          });
        }
      })
    },
  },
  created() {
    shopinfo().then((res) => {
      console.log(res.data);
      this.shopdata = res.data.data;
      this.newavatar = this.shopdata.avatar.substring(
        this.shopdata.avatar.lastIndexOf("/") + 1
      );

      this.fileList = this.shopdata.pics.map((obj) => {
        let name = obj.substring(obj.lastIndexOf("/") + 1);
        this.picsList.push(name);
        return {
          name,
          url: obj,
        };
      });
    });
    // shopinfo
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>